{% extends 'base/base.html' %}

{% block title %}
    套餐详情
{% endblock %}

{% block main %}
    <div class="plan-hero">
        <h2>{{ combo.name }}</h2>
        <div class="meta">{{ combo.info }}</div>
    </div>
    <div class="card plan-card border-0 shadow-sm">
        <div class="card-body">
            <div class="row">
                <div class="col-sm-4">
                    <div class="plan-feature"><span class="dot"></span><span>价格</span></div>
                    <div class="plan-price">¥{{ combo.price }}<small class="text-muted">/月</small></div>
                </div>
                <div class="col-sm-8">
                    <div class="row">
                        <div class="col-xs-4 text-center">
                            <h4 class="text-info">{{ combo.traffic }}MB</h4>
                            <small class="text-muted">流量</small>
                        </div>
                        <div class="col-xs-4 text-center">
                            <h4 class="text-warning">{{ combo.talk_time }}分钟</h4>
                            <small class="text-muted">语音</small>
                        </div>
                        <div class="col-xs-4 text-center">
                            <h4 class="text-danger">{{ combo.message }}条</h4>
                            <small class="text-muted">短信</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}